<template>
  <div class="pageFooter">
    <div class="container" style="">

      <div class="toplogo">
        <img :src="systemDto.bottomLogoUrl">
      </div>

      <div class="top">
        <div class="left">
          <div class="item">
            <img :src="systemDto.telIcon"/>
            <span>{{systemDto.tel}}</span>
          </div>
          <div class="item">
            <img :src="systemDto.mailBoxIcon"/>
            <span>{{systemDto.mailBox}}</span>
          </div>
        </div>
        <div class="right">
          <img :src="systemDto.gzhUrl"/>
          <div class="desc">{{$t('common.followName')}}</div>
        </div>
      </div>

      <div class="bottom">
        <div class="logo">
          <img :src="systemDto.bottomLogoUrl">
        </div>
        <div class="right">
          <div class="nav">
            <span v-for="(item, index) in menuList"  @click="linkTo(item.url)">{{item.name}}</span>
          </div>
          <div class="desc">
            {{systemDto.copyright}}{{systemDto.icpRecord}} {{systemDto.psRecord}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import {ref, watchEffect} from 'vue'
  import {useLocaleStore} from '../store/locales.js'
  const useLocale = useLocaleStore()

  import { UTILS_Tool } from '@/utils/index.js'
  const { routerLink } = UTILS_Tool()

  const systemDto = ref({})
  const menuList = ref([])
  watchEffect(() => {
    menuList.value = useLocale.menuList
    systemDto.value = useLocale.systemDto
  })

  // 路由跳转
  const linkTo = (url) => {
    routerLink(url)
  }

</script>

<style scoped lang="scss">

  @media screen and (max-width: 1079px) {

    .pageFooter {
      background: url("@/assets/images/footerBanner.jpg") no-repeat;
      background-size: 100% 100%;
      color: #fff; padding-top: 30px;

      .container {
        text-align: center;
      }
      .toplogo{
        width: 160px; margin: 0 auto; padding-bottom: 10px;
        img{
          width: 100%;
        }
      }

      .top {

        .left {
          .item{
            display: flex; justify-content: center; align-items: center; padding: 5px 0;
            img {
              width: 20px;
              display:  block;
            }
            span {
              line-height: 20px;
              font-size: 14px;
              padding-left: 10px;
            }
          }
        }
        .right {
          padding-top: 20px;
          img {
            width: 100px;
            height: auto;
          }
          .desc {
            font-size: 0.8vw;
            text-align: center;
          }
        }
      }

      .bottom {
        padding: 10px 0 20px;
        .logo {
         display: none;
        }
        .right {
          line-height: 22px;
          .nav {
           display: none;
          }
          .desc {
            color: rgba(255,255,255, 0.5);
            font-size: 14px; padding: 0 20px;
          }
        }
      }
    }

  }

  @media screen and (min-width: 1080px) {
    .pageFooter {
      background: url("@/assets/images/footerBanner.jpg") no-repeat;
      background-size: 100% 100%;
      color: #fff;
      .container {
        width: 75vw;
        margin: 0 auto;
      }
      .toplogo{
        display: none;
      }

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 3vw 0;
        border-bottom: 1px solid #414673;

        .left {
          display: flex;
          .item{}
          img {
            width: 3.6vw;
            vertical-align: center;
            display: inline-block;
          }
          span {
            vertical-align: top;
            line-height: 3.6vw;
            font-size: 1.6vw;
            padding-left: 1vw;
            padding-right: 5vw;
          }
        }
        .right {
          img {
            width: 5.6vw;
            height: auto;
          }
          .desc {
            font-size: 0.8vw;
            text-align: center;
          }
        }
      }

      .bottom {
        display: flex;
        padding: 2vw 0;
        .logo {
          width: 10vw;
          box-sizing: content-box;
          padding-right: 2vw;
          border-right: 1px solid #414673;
          img {
            width: 100%;
            height: auto;
          }
        }
        .right {
          padding-left: 2vw;
          line-height: 1.5vw;
          .nav {
            font-size: 0.9vw;
            span {
              padding-right: 2vw;
              cursor: pointer;
              &:hover{
                color: #69696F;
              }
            }
          }
          .desc {
            color: rgba(255,255,255, 0.5);
            font-size: 0.8vw;
          }
        }
      }
    }

  }
</style>
